/**
 * Created by charlie on 17-12-27.
 */
import React, {Component} from 'react';
import {Actions} from 'react-native-router-flux'
import {
    StyleSheet,
    View,
    Text,
    TextInput,
  ScrollView,
    TouchableOpacity,
} from 'react-native';
import Colors from '../../assets/colors'
import {Button} from 'antd-mobile'
import {Table, TableWrapper, Row, Rows, Col, Cols, Cell} from 'react-native-table-component';
import mockData from './mockData'
import Pangitor from '../../routes/Pangitor'
import ModalDropdown from 'react-native-modal-dropdown';
import {DatePicker, List, TextareaItem} from 'antd-mobile';

export default class taiZhangList extends Component<{}> {
    render() {
        let arr = this.props.taiZhang.list;
        let page = this.props.taiZhang.page;
        let last = this.props.taiZhang.last;
        let perPage = this.props.taiZhang.perPage;
        let prjname = this.props.taiZhang.prjname;
        let startDate = this.props.taiZhang.startDate;
        let endDate = this.props.taiZhang.endDate;

        const {getDetail,changeText,selectRowData,search,setStartDate,setEndDate} = this.props;
        const ele = (value) => (
            <TouchableOpacity onPress={() => {
                getDetail(arr[value].id)}}>
                <View style={styles.btnContainer}>
                    <Text style={styles.btn}>详情</Text>
                </View>
            </TouchableOpacity>
        );
        const tableData = arr.map((val, index) => {
            let arra = [perPage*(page-1)+index + 1];
            if(val.tableData.length < 6){
                val.tableData = arra.concat(val.tableData)
                val.tableData.push(ele(index))
            }
            return val.tableData
        });


        let date  = new Date();
        let minDate = new Date((date.getFullYear()-5)+'-01-01');
        let maxDate = new Date((date.getFullYear()+10)+'-01-01');

        return (
            <ScrollView style={styles.container}>
                <View style={{flexDirection:'row',alignItems:'center',marginBottom:10}}>
                    <ModalDropdown style={styles.selectBt} textStyle={{fontSize:18}} defaultValue={'处理结果'}
                                   options={['记录','限时整改','全部停工','局部停工']}
                                   renderButtonText = {(rowData) =>{selectRowData(rowData)}}
                                   dropdownStyle={{marginTop:14}} dropdownTextStyle={{fontSize:18}}/>
                    <View style={{width:220,borderWidth:1,borderColor:Colors.btnPrimaryBg}}>
                        <DatePicker
                            mode="date"
                            title="开始日期"
                            value={startDate}
                            minDate={minDate}
                            maxDate={maxDate}
                            onChange={date => setStartDate(date)}
                        >
                            <List.Item arrow="horizontal" style={{height:50}} >开始日期</List.Item>
                        </DatePicker>
                    </View>
                    <View style={{width:220,borderWidth:1,borderColor:Colors.btnPrimaryBg}}>
                        <DatePicker
                            mode="date"
                            title="结束日期"
                            value={endDate}
                            minDate={minDate}
                            maxDate={maxDate}
                            onChange={date => setEndDate(date)}
                        >
                            <List.Item arrow="horizontal" style={{height:50}} >结束日期</List.Item>
                        </DatePicker>
                    </View>
                    <View style={{flex:10,height:50,borderWidth:1,borderColor:Colors.btnPrimaryBg}}>
                        <TextInput underlineColorAndroid='transparent' style={{paddingRight:0}}
                                   value={prjname}
                                   placeholder={'请输入您要查找的项目名称...'}
                                   onChangeText={(val) =>{changeText(val)}}/>
                    </View>
                    <View style={styles.searchBt}>
                        <Text style={{fontSize:25,color:'white'}} onPress={() =>{search()}}>搜索</Text>
                    </View>
                </View>
              {
                tableData.length >0?
                  <View>
                      <Table borderStyle={{borderWidth: 0.5, borderColor: Colors.tableColor}}>
                          <Row data={mockData.tableHead} flexArr={[1,3,4, 3, 2, 2, 2]} style={styles.head} textStyle={styles.text}/>
                          <TableWrapper style={{flexDirection: 'row'}}>
                              <Rows data={tableData} flexArr={[1,3,4, 3, 2, 2, 2]} style={styles.row} textStyle={styles.itemText}/>
                          </TableWrapper>
                      </Table>
                    {/*分页控件，mainFunction = 请求列表的方法名字，namespace = 当前namespace ， currentPage = 当前页码， totalPage= 总页数*/}
                      <Pangitor style={{height: 500}} mainFunction={'getTableList'} namespace={'taiZhang'} currentPage={page} totalPage={last} />

                  </View>:
                  <Text style={{paddingTop:200,textAlign:'center',fontSize:20}}>暂无相关内容</Text>
              }
            </ScrollView>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        paddingTop:10,
        paddingLeft: 20,
        paddingRight: 20,
        marginBottom: 30,
    },
    text: {
        textAlign: 'center',
        color: '#fff',
        fontSize: 22
    },
    itemText: {
        textAlign: 'center',
        fontSize: 19,
      marginTop:10,
      marginBottom:10
    },
    row: {
        // height: 100,
        backgroundColor: '#fff'
    },
    btnContainer: {
        alignItems: 'center',
        justifyContent: 'center'
    },
    btn: {
        height: 28,
        paddingTop: 2,
        paddingBottom: 2,
        paddingLeft: 10,
        paddingRight: 10,
        alignItems: 'center',
        color: '#fff',
        textAlign: 'center',
        backgroundColor: Colors.btnPrimaryBg,
        borderRadius: 7,
        fontSize: 18
    },
    fenye: {
        height: 35,
        paddingBottom: 2,
        paddingLeft: 25,
        paddingRight: 25,
        alignItems: 'center',
        color: '#fff',
        textAlign: 'center',
        backgroundColor: Colors.btnPrimaryBg,
        borderRadius: 4,
        fontSize: 25
    },
    surJ: {
        marginLeft:10,
        height: 35,
        paddingTop:5,
        paddingBottom: 2,
        paddingLeft: 15,
        paddingRight: 15,
        alignItems: 'center',
        color: '#fff',
        textAlign: 'center',
        backgroundColor: Colors.btnPrimaryBg,
        borderRadius: 4,
        fontSize: 18
    },
    btnText: {
        textAlign: 'center',
        color: '#fff',
        fontSize: 22
    },
    head: {
        height: 50,
        backgroundColor: Colors.navbarBackground
    },
    title: {flex: 1,
        backgroundColor: '#f6f8fa'
    },
    searchBt:{
        alignItems:'center',
        backgroundColor:Colors.btnPrimaryBg,
        paddingTop:8,
        paddingBottom:8,
        // paddingLeft:5,
        borderBottomRightRadius:5,
        borderTopRightRadius:5,
        flex:2
    },
    selectBt:{
        alignItems:'center',
        backgroundColor:Colors.btnPrimaryBg,
        paddingTop:14,
        paddingBottom:14,
        // paddingLeft:18,
        borderBottomLeftRadius:5,
        borderTopLeftRadius:5,
        flex:2
    },
});